<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>流量分析</title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div>
            <h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0)"><i class="fa fa-home"></i> <span>统计</span></a>
                    </li>
                    <li>
                        <strong>流量分析</strong>
                    </li>
                </ol>
            </h4>
        </div>

        <div>

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>流量看板 <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="PV（Page View）访问量, 即页面浏览量或点击量，衡量网站用户访问的网页数量；在一定统计周期内用户每打开或刷新一个页面就记录1次，多次打开或刷新同一页面则浏览量累计。<br/>UV（Unique Visitor）独立访客，统计1天内访问某站点的用户数(以cookie为依据);访问网站的一台电脑客户端为一个访客。"><i class="fa fa-exclamation-circle"></i></span></h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="bulletin-board-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           readonly
                                           id="boardStatTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           readonly
                                           id="boardEndTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">

                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="board-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->

                    <section class="row">
                        <div class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">平台访问量(PV)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台访客数，是整个平台的 PV 包含 （各渠道终端首页、商品详情页、活动专题页）"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="pvCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </div>
                        <div class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">平台访客数(UV)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台访客数，是整个平台的 PV 包含 （各渠道终端首页、商品详情页、活动专题页）"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="uvCount">--</strong>
                                    <span class="fs14 c-222 vam hide"></span>
                                </aside>
                            </section>
                        </div>
                        <div class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">商品访问量(PV)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，商品访问量，包含（各商品详情页）的到访 PV"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="goodsPVCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </div>
                        <div class="col-sm-3">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">商品访客数(UV)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，商品访客数，包含（各商品详情页）的到访 UV"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000 vam" id="goodsUVCount">--</strong>
                                    <span class="fs14 c-222 vam hide">万</span>
                                </aside>
                            </section>
                        </div>
                    </section>

                    <!--流量看板曲线图 开始-->
                    <div id="board-charts-box" class="transaction-state-chart__wrap pt10">
                    </div>
                    <!--流量看板曲线图 结束-->

                </div>
            </div>
        </div>

        <div th:if="${configMap['type']}=='96K'">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>云视频数据面板 <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="默认集成268云视频服务。"><i class="fa fa-exclamation-circle"></i></span></h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="video-board-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           readonly
                                           id="videoStatTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           readonly
                                           id="videoEndTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">
                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="video-flow-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->
                    <section class="row">
                        <div class="col-sm-6">
                            <section class="iv-data-item" style="width: auto">
                                <span class="fs12 c-999">录播流量：已使用 / 总流量(G)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，已使用流量和总流量计数"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-green vam" id="useFlow">--</strong>
                                    <span class="fs14 c-222 vam">/</span>
                                    <span class="fs14 c-222 vam" id="flow">--</span>
                                    <span class="fs12 c-red vam hide" id="goBeyond">（流量已超，请联系268云服务 15832677145、18601120030）</span>
                                </aside>
                            </section>
                        </div>
                        <div class="col-sm-6">
                            <section class="iv-data-item" style="width: auto">
                                <span class="fs12 c-999">存储空间：已使用 / 总空间(G)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，已使用空间和总空间计数"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <!--<strong class="fs24 c-red vam">620</strong>-->
                                    <strong class="fs24 c-green vam" id="useSpace">--</strong>
                                    <span class="fs14 c-222 vam">/</span>
                                    <span class="fs14 c-222 vam" id="space">600</span>
                                    <span class="fs12 c-red vam">（空间已超，请联系268云服务 15832677145、18601120030）</span>
                                </aside>
                            </section>
                        </div>
                    </section>
                    <!--流量/存储空间 看板曲线图 开始-->
                    <div class="transaction-state-chart__wrap pt10" id="video-flow-box">
                    </div>
                    <!--流量/存储空间 看板曲线图 结束-->
                </div>
            </div>
        </div>

        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>流量分布</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="flow-board-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           readonly
                                           id="flowStatTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           readonly
                                           id="flowEndTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">
                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="terminal-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->
                    <section class="row">
                        <div class="col-sm-6">
                            <h5 class="c-222">终端系统分布
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Windows、Android、IOS、MAC、其他五部分终端的用户UV分布统计">
                                    <i class="fa fa-exclamation-circle"></i>
                                </span>
                            </h5>
                            <section id="terminal-stat-box" class="pt10 mt5 mb10 transaction-state-chart__wrap">
                            </section>
                        </div>
                        <div class="col-sm-6">
                            <h5 class="c-222">渠道分布
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="PC、H5、安卓、IOS、小程序的PV分布">
                                    <i class="fa fa-exclamation-circle"></i>
                                </span>
                            </h5>
                            <section id="page-view-stat-box" class="pt10 mt5 mb10 transaction-state-chart__wrap">
                            </section>
                        </div>
                        <!--<div class="col-sm-6">
                            <h5 class="c-222">地域分布</h5>
                            <section class="pt10 mt5 mb10 transaction-state-chart__wrap">
                                aaaa
                            </section>
                        </div>
                        <div class="col-sm-6">
                            <h5>&nbsp;</h5>
                            <section class="pt10 mt5 mb10 transaction-state-chart__wrap">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>地域</th>
                                        <th>浏览量</th>
                                        <th>访客数</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><i class="fs24 c-red">1</i></td>
                                        <td><span class="line">北京</span></td>
                                        <td><span class="line">5695</span></td>
                                        <td><span class="line">236802</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fs24 c-orange">2</i></td>
                                        <td><span class="line">北京</span></td>
                                        <td><span class="line">5695</span></td>
                                        <td><span class="line">236802</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fs24 c-master">3</i></td>
                                        <td><span class="line">北京</span></td>
                                        <td><span class="line">5695</span></td>
                                        <td><span class="line">236802</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fs20 c-999">4</i></td>
                                        <td><span class="line">北京</span></td>
                                        <td><span class="line">5695</span></td>
                                        <td><span class="line">236802</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fs20 c-999">5</i></td>
                                        <td><span class="line">北京</span></td>
                                        <td><span class="line">5695</span></td>
                                        <td><span class="line">236802</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fs20 c-999">6</i></td>
                                        <td><span class="line">北京</span></td>
                                        <td><span class="line">5695</span></td>
                                        <td><span class="line">236802</span></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </section>
                        </div>-->
                    </section>

                </div>
            </div>

        </div>


    </div>
    <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/time-utils.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/flow/flow-statistics.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:inline="javascript" type="text/javascript">
        var videoType = [[${configMap['type']}]];
    </script>
</body>
</html>
